<template>
	<view class="team-container">
		<view class="header-container">
			<!-- <view class="right-bg"></view> -->
			<view class="search-container">
				<view class="team-tab">
					<view :class="['team-tab-item',orderDetailType===1?'active-item':'']" @click="changeDetailType(1)">
						{{$t('text.gols1')}}</view>
					<view :class="['team-tab-item',orderDetailType===2?'active-item':'']" @click="changeDetailType(2)">
						{{$t('text.huiyuan')}}</view>
						<view :class="['team-tab-item',orderDetailType===3?'active-item':'']" @click="changeDetailType(3)">
							{{$t('navbar.watchds')}}</view>
						<view :class="['team-tab-item',orderDetailType===4?'active-item':'']" @click="changeDetailType(4)">
							{{$t('text.gols2')}}</view>	
						<view :class="['team-tab-item',orderDetailType===5?'active-item':'']" @click="changeDetailType(5)">
							{{$t('text.gols3')}}</view>		
				</view>
				<view class="sort text-overflow flex" @click="show=true">
					<text class=" ">{{monthStr}}</text>
					<u-icon class="arrow-down" color="#333" name="arrow-down" size="16"></u-icon>
				</view>
			</view>
			<view class="data-container">
				<view class="data-item">
					<view class="data-num">{{zong}}</view>
					<view class="data-name">{{$t('text.gols4')}}</view>
				</view>
				<view class="data-item">
					<view class="data-num">{{playEarning}}</view>
					<view class="data-name">{{$t('text.gols5')}}</view>
				</view>
			</view>
		</view>
		<view class="title">
		    <view class="cl-w">{{$t("text.gols6")}}</view>
		</view>
		<view class="members-container" v-if="orderEarningDetailListData&&orderEarningDetailListData.length>0">
			<view class="earning-item" v-for="item in orderEarningDetailListData" >
				<view class="item-title">
					<view class="date-time">{{$u.timeFormat(item.createtime, 'yyyy-mm-dd hh:MM:ss')}} </view>
					<view class="earining-data">{{$('text.gols7')}}：<text
							class="total-num">{{item.czz}}</text>
					</view>
				</view>
				<view class="earning-detail-info">
					<view class="earning-detail-item">
						<view class="item-name">{{($t('text.gols8'))}}</view>
						<view class="item-num">{{item.num}}</view>
					</view>
					<view class="earning-detail-item">
						<view class="item-name">{{($t('text.gols9'))}}</view>
						<view class="item-num">{{item.pingtai}}</view>
					</view>
					<view class="earning-detail-item">
						<view class="item-name">{{($t('text.gols10'))}}</view>
						<view class="item-num">{{item.fenxiao}}</view>
					</view>
					<view class="earning-detail-item">
						<view class="item-name">{{($t('text.gols11'))}}</view>
						<view class="item-num">{{item.money}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="empty" v-else>
			<image class=" " mode="scaleToFill" src="https://phone-res.jiaxianghui.cn/data-null.png"
				style="width:350rpx;height:350rpx;"></image>
			<view class="empty-tips">
				<text class=" ">{{($t('text.gols11'))}}</text>
			</view>
		</view>
		<u-datetime-picker mode="year-month" :show="show" v-model="value1" @confirm="confirm" @cancel="cancel"></u-datetime-picker>
		<!-- <u-picker bind:__l="__l" bind:confirm="__e" bind:input="__e" class=" "
			data-event-opts="{{[ [ '^confirm',[ ['confirm'] ] ],[ '^input',[ [ '__set_model',[ '','showSort','$event',[] ] ] ] ] ]}}"
			defaultTime="{{month}}" endYear="{{endYear}}" mode="time" params="{{year:true,month:true}}" rangeKey="name"
			value="{{showSort}}" vueId="708d8ad5-3" zIndex="90"></u-picker> -->
	</view>

</template>

<script>
	
	export default {
		
		data() {
			return {
				showSort: !1,
				month: "",
				zong: 0,
				playEarning: 0,
				totalRevenue: 0,
				endYear: new Date().getFullYear(),
				orderEarningDetailListData: [{
					date:'2024-07-08',
					total_final_commission_amount:10,
					download_count:22,
					g1:100,
					g2:99
				},{
					date:'2024-07-10',
					total_final_commission_amount:10,
					download_count:22,
					g1:100,
					g2:99
				},{
					date:'2024-07-11',
					total_final_commission_amount:10,
					download_count:22,
					g1:100,
					g2:99
				}],
				orderDetailType: 1,
				show: false,
				monthStr: '',
				value1: Number(new Date()),
			}
		},
		onLoad() {
			this.monthStr = uni.$u.timeFormat(Number(new Date()), 'yyyy-mm');
			this.changeDetailType(1)
		},
		methods: {
			changeDetailType(e) {
				this.orderDetailType = e
				
				this.$httpas.post2({
					data: {
						do: 'creator',
						op: 'shouyi',
						index: this.orderDetailType,
						monthStr: this.monthStr,
					},
					success: res => {
						this.orderEarningDetailListData = res.list
						this.zong = res.zong
						this.playEarning = res.playEarning
					}
				})
			},
			confirm(e){
				console.log(e)
				this.monthStr = uni.$u.timeFormat(e.value, 'yyyy-mm');
				this.changeDetailType(this.orderDetailType)
				this.cancel()
			},
			cancel(){
				this.show = false
			}
		}
	}
</script>

<style lang="scss">
	.team-container {
		padding: 24rpx;
	}

	.header-container {
		background: linear-gradient(90deg, rgba(70, 174, 247, 1) 0%, rgba(48, 199, 236, 1) 53%, rgba(22, 217, 227, 1) 100%);
		border-radius: 16rpx;
		height: 288rpx;
		
		padding: 24rpx;
		position: relative;
		width: 100%;
		z-index: 1;
		margin-bottom: 30rpx;
	}

	.header-container .right-bg {
		background-image: url(https://phone-res.jiaxianghui.cn/20221113175255-page-bg.eb3254be.png);
		background-repeat: no-repeat;
		background-size: 100%;
		height: 100%;
		position: absolute;
		right: 0;
		top: 0;
		width: 40%;
		z-index: -1;
	}

	.header-container .search-container {
		display: flex;
	}

	.header-container .search-container .tatal-earning {
		-webkit-box-flex: 1;
		-webkit-box-align: center;
		align-items: center;
		border-radius: 32rpx;
		color: #fff;
		display: flex;
		flex: 1;
		height: 64rpx;
		margin-right: 24rpx;
		padding: 0 4rpx;
	}

	.header-container .search-container .tatal-earning .unit {
		font-size: 24rpx;
		margin-right: 4rpx;
	}

	.header-container .search-container .tatal-earning .total-amount {
		-webkit-box-align: center;
		align-items: center;
		display: flex;
	}

	.header-container .search-container .tatal-earning .amount-text {
		font-weight: 700;
	}

	.header-container .search-container .data-container {
		-webkit-box-align: center;
		align-items: center;
		display: flex;
		margin-top: 40rpx;
		text-align: center;
	}

	.header-container .search-container .data-container .data-item {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.header-container .search-container .data-container .data-item .data-name {
		color: #fff;
		font-size: 28rpx;
	}

	.header-container .search-container .data-container .data-item .data-num {
		color: #fff;
		font-size: 44rpx;
		font-weight: 700;
		margin-bottom: 12rpx;
	}

	.header-container .search-container .data-container .data-item:nth-child(1) {
		border-right: 1rpx solid #fff;
	}

	.header-container .search-container .sort {
		background: #fff;
		border-radius: 32rpx;
		font-size: 24rpx;
		height: 64rpx;
		line-height: 64rpx;
		padding: 0 40rpx 0 24rpx;
		position: relative;
		text-align: center;
		width: 200rpx;
	}

	.header-container .search-container .sort .arrow-down {
		bottom: 0;
		position: absolute;
		right: 20rpx;
		top: 0;
	}

	.header-container .team-tab {
		-webkit-box-flex: 1;
		-webkit-box-align: center;
		align-items: center;
		background: #fff;
		border-radius: 32rpx;
		display: flex;
		flex: 1;
		height: 64rpx;
		margin-right: 24rpx;
		padding: 0 4rpx;
	}

	.header-container .team-tab .team-tab-item {
		-webkit-box-flex: 1;
		background: transparent;
		border-radius: 30rpx;
		color: #333;
		flex: 1;
		font-size: 24rpx;
		height: 58rpx;
		line-height: 58rpx;
		padding: 0 14rpx;
		text-align: center;
		transition: .2s;
	}

	.header-container .team-tab .all {
		padding: 0;
		width: 120rpx;
	}

	.header-container .team-tab .active-item {
		background: linear-gradient(90deg, rgba(70, 174, 247, 1) 0%, rgba(48, 199, 236, 1) 53%, rgba(22, 217, 227, 1) 100%);
		color: #fff;
	}

	.header-container .data-container {
		-webkit-box-align: center;
		align-items: center;
		display: flex;
		margin-top: 40rpx;
		text-align: center;
	}

	.header-container .data-container .data-item {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.header-container .data-container .data-item .data-name {
		color: #fff;
		font-size: 28rpx;
	}

	.header-container .data-container .data-item .data-num {
		color: #fff;
		font-size: 44rpx;
		font-weight: 700;
		margin-bottom: 12rpx;
	}

	.header-container .data-container .data-item:nth-child(1) {
		border-right: 1rpx solid #fff;
	}

	.members-container .earning-item {
		-webkit-box-align: center;
		align-items: center;
		border-radius: 16rpx;
		// box-shadow: 0rpx 1rpx 10rpx 2rpx #1f1f1f;
		color: #fff;
		margin-bottom: 24rpx;
		padding: 24rpx;
		background-color: #171717;
	}

	.members-container .earning-item .item-title {
		-webkit-box-pack: justify;
		display: flex;
		justify-content: space-between;
		margin-bottom: 24rpx;
		width: 100%;
	}

	.members-container .earning-item .item-title .date-time,
	.members-container .earning-item .item-title .earining-data {
		font-size: 28rpx;
		font-weight: 700;
	}

	.members-container .earning-item .item-title .total-num {
		color: #ef2222;
		font-weight: 700;
	}

	.members-container .earning-item .earning-detail-info {
		-webkit-box-align: center;
		align-items: center;
		background: #1E1e1e;
		border-radius: 16rpx;
		display: flex;
		padding: 24rpx;
		text-align: center;
	}

	.members-container .earning-item .earning-detail-info .earning-detail-item {
		-webkit-box-flex: 1;
		flex: 1;
	}

	.members-container .earning-item .earning-detail-info .item-name {
		font-size: 24rpx;
		margin-bottom: 12rpx;
	}

	.members-container .earning-item .earning-detail-info .item-num {
		color: #AEB2C1;
		font-size: 24rpx;
	}

	.empty {
		text-align: center;
	}
	.title {
	    -webkit-box-align: center;
	    align-items: center;
	    display: flex;
	    font-size: 32rpx;
	    font-weight: 700;
	    margin-bottom: 40rpx;
	    padding-left: 24rpx;
	    position: relative;
	}
	
	.title::after {
	    background: rgba(11, 144, 249, 1);
	    border-radius: 2rpx;
	    bottom: 6rpx;
	    content: "";
	    display: block;
	    left: 0;
	    margin: auto;
	    position: absolute;
	    top: 6rpx;
	    width: 8rpx;
	}
</style>